import React, {Component} from 'react'
import {connect} from 'react-redux'
import {Button, Layout, message, Breadcrumb} from 'antd'
import {hashHistory} from 'react-router'
import {
    fetchArticleList, // 获取文章列表
    fetchArticleDel, // 删除文章
    fetchArticleDetail, // 获取文章详情
    fetchChangeArticleStatus, // 修改文章状态
    fetchArticleUpsert, // 新增/修改文章
} from '@apis/manage'

import ArticleList from './articleList'
import ArticleAdd from "./modal/articleAdd"
import ArticleView from "./modal/articleView"
import '@style/article.less'

const {Content} = Layout

// 声明组件  并对外输出
export default class ArticleManage extends Component {
    // 初始化页面常量 绑定事件方法
    constructor(props) {
        super(props)
        this.state = {
            title: '新增文章',
            pid: '',
            itemId: '',
            type: '',
            tableListPageIndex: 1,
            tableDataPageSize: 5,
            values: {
                article_id: '',
                a_title: '',
                a_introduce: '',
                user_name: '',
                a_create_time: ""
            },
            moduleDetailResult: {
                article_id: '',
                a_title: '',
                a_introduce: '',
                user_name: '',
                a_create_time: ""
            },
            Visible: false,
            buttonVisible: false,
            addButtonVisible: false,
            buttonEditState: '', // 按钮是处于修改还是新增新增状态
            butttonListLoading: false, // 按钮列表加载状态
            buttonEditData: {},
            buttonDataSource: [], // 按钮列表数据
            tableListLoading: false, // 表格列表加载状态
            tableDataSource: [], // 表格列表列表数据
        }
        this.getTableList = this.getTableList.bind(this)
        this.handleDelete = this.handleDelete.bind(this)
        this.handleModify = this.handleModify.bind(this)
        this.handlePreView = this.handlePreView.bind(this)
        this.handleOk = this.handleOk.bind(this)
        this.handleCancel = this.handleCancel.bind(this)
    }

    // 组件已经加载到dom中
    componentWillMount() {
        this.getTableList()
    }

    getTableList(pageIndex) {
        console.log(pageIndex)
        const {tableListPageIndex, tableDataPageSize} = this.state;
        this.setState({
            tableListLoading: true,
        }, () => {
            fetchArticleList({pageIndex: pageIndex || tableListPageIndex, pageSize: tableDataPageSize}, (result) => {
                this.setState({
                    tableListLoading: false,
                    tableListPageIndex: pageIndex || tableListPageIndex,
                    tableDataSource: result.data.list.map(item => {
                        item.key = item.article_id;
                        return item;
                    }),
                    tableDataTotal: result.data.total,
                    tableDataPageSize: tableDataPageSize,
                    tableDataTurnPage: this.getTableList,
                })
                console.log(this.state)
            })
        })
    }

    // 预览文章
    handlePreView(id) {
        this.setState({
            Visible: true, title: '预览文章', itemId: id, type: 'preView'
        })
    }

    // 修改、新增文章
    handleModify(id) {
        this.setState({
            Visible: true, title: '修改文章', itemId: id, type: 'modify'
        })
    }

    // 删除文章
    handleDelete(id) {
        fetchArticleDel({article_id: id}, (result) => {
            message.success(result.msg)
            this.getTableList(this.state.tableListPageIndex)
        })
    }

    // form 表单保存后调用
    handleOk() {
        this.getTableList()
        this.setState({Visible: false})
    }

    // 隐藏新增修改窗口
    handleCancel() {
        this.setState({Visible: false, type: 'add'})
    }

    footer() {
        return (
            <div>
                <Button type="primary">确定</Button>
                <Button>取消</Button>
            </div>
        )
    }

    render() {
        const {
            tableListLoading, tableDataSource, moduleDetailResult, tableDataTotal, tableDataTurnPage, tableDataPageSize, articleDetailResult
        } = this.state
        return (
            <div className="page page-scrollfix page-usermanage page-modulemanage">
                {this.state.Visible
                    ? <Breadcrumb className="tab-list">
                        <Breadcrumb.Item onClick={this.handleCancel}>列表</Breadcrumb.Item>
                        <Breadcrumb.Item>编辑</Breadcrumb.Item>
                    </Breadcrumb>
                    : null}
                {!this.state.Visible
                    ? <Layout>
                        <Layout className="page-body">
                            <Content>
                                <div className="page-content">
                                    <ArticleList
                                        dataSource={tableDataSource}
                                        loading={tableListLoading}
                                        tableDataTotal={tableDataTotal}
                                        tableDataTurnPage={tableDataTurnPage}
                                        tableDataPageSize={tableDataPageSize}
                                        onDelete={this.handleDelete}
                                        onModify={this.handleModify}
                                        onPreView={this.handlePreView}
                                    />
                                </div>
                            </Content>
                        </Layout>
                    </Layout>
                    : (this.state.type == "modify"
                        ? <ArticleAdd
                            visible={this.state.Visible}
                            itemId={this.state.itemId}
                            type={this.state.type}/>
                        : <ArticleView
                            itemId={this.state.itemId}
                            type={this.state.type}/>)
                }
            </div>
        )
    }
}
